<script setup>
import articleApi from "@/api/article";
import { ref } from "vue";
import { onMounted } from "vue";
import { Edit, Delete } from "@element-plus/icons-vue";
import DialogChannel from "./components/DialogChannel.vue";
import { ElMessage, ElMessageBox } from "element-plus";
// 表格默认的加载loading效果,发请求的时候加载，数据加载完成之后就要取消
const loading = ref(false);

const channelList = ref([]);
const getChannelList = async () => {
  //发起请求前开启loading效果
  loading.value = true;
  const result = await articleApi.getMyArticleList();
  channelList.value = result.data.data;
  //发完请求之后，得到数据之后关闭loading效果
  loading.value = false;
};
//created:生命函数，一进页面就要获取数据
onMounted(() => {
  getChannelList();
});

const dialog = ref(); //绑定属性
//打开dialog弹框的方法
const onAddChannel = () => {
  dialog.value.open({});
};

// 编辑、修改
const onEditChannel = (row, $index) => {
  dialog.value.open(row);
};
// 删除
const onDelteChannel = async function (row, $index) {
  await ElMessageBox.confirm('你确认要删除该分类吗?','温馨提示',{
    type:'warning',
    confirmButtonText:'确认',
    cancelButtonText:'取消'
  })
  await articleApi.delteArticle(row.id);
  ElMessage.success('删除成功');
  getChannelList();
};

//编辑或者添加完成之后，收到子组件子的消息通知之后，进行重新刷新一下页面
const onSuccess = () => {
  getChannelList()
}
</script>

<template>
  <page-container title="文章分类">
    <!-- 头部区域，使用了具名插槽 -->
    <template #extra>
      <el-button type="primary" @click="onAddChannel">添加分类</el-button>
    </template>

    <!-- 主题部分提供表格，使用了默认插槽 -->
    <el-table
      :data="channelList"
      stripe
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="date" label="序号" width="100" type="index" />
      <el-table-column prop="cate_name" label="分类名称" />
      <el-table-column prop="cate_alias" label="分类别名" />
      <el-table-column prop="address" label="操作">
        <template #default="{ row, $index }">
          <el-button
            :icon="Edit"
            @click="onEditChannel(row, $index)"
            type="primary"
            plain
            >编辑</el-button
          >
          <el-button
            :icon="Delete"
            @click="onDelteChannel(row, $index)"
            type="danger"
            plain
            >删除</el-button
          >
        </template>
      </el-table-column>
      <!-- 没有数据时候，展示的图片 -->
      <template #empty>
        <el-empty description="还没有任何数据"></el-empty>
      </template>
    </el-table>
    <!-- dialog弹层组件 -->
    <DialogChannel ref="dialog" @success="onSuccess"></DialogChannel>
  </page-container>
</template>

<style lang="scss" scoped></style>